<template>
    <div class="student">
        <h2>姓名：{{ name }}</h2>
        <h2>性别：{{ sex }}</h2>
        <button @click="sendStudentName">把学生名给App</button>
        <button @click="unbind">解绑事件</button>
    </div>
</template>
<script>
export default {
    name: 'student',
    data() {
        return {
            name: 'aBiu',
            sex: '男',
        }
    },
    methods: {
        sendStudentName() {
            // 触发Student组件实例身上的绑定的aBiu事件
            // 给父组件添加了一个自定义事件aBiu，并且传入了参数this.name            
            this.$emit('aBiu', this.name)

            // 如果传入多个参数的写法
            // this.$emit('aBiu', this.name, 1, 2, 3)
        },
        unbind() {
            this.$off('aBiu')

            // 如果解绑多个
            // this.$off(['aBiu', 'xxx'])

            // 解绑所有
            // this.$off()
        }
    }
}
</script>
<!-- 加上scoped属性，这个样式只作用于当前页面 -->
<style scoped>
.student {
    background-color: pink;
}
</style>